<template>
  <div>
    <!--查询表单-->
    <el-form label-position="right" size="small" :inline="true" label-width='90px' class="query-form">
      <el-button type="primary" icon="el-icon-circle-plus" size="small" @click="dialogAddVisible = true">新增</el-button>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData"
        border style="width: 100%; margin-top: 20px;" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column sortable label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="getMembers(scope.row.id)" size="mini" style="padding: 4px 6px;">成员</el-button>
          <el-button type="primary" @click="getMenus(scope.row.id)" size="mini" style="padding: 4px 6px;">菜单</el-button>
          <el-button type="primary" @click="delRole(scope.row.id, scope.$index)" size="mini" style="padding: 4px 6px;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增角色-->
    <el-dialog title="新增角色" width="600px" @open="openAdd" @close="closeAdd" class="dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="addForm" style="margin-right: 20px;" :model="addForm" :rules="addFormRules" label-position="right" label-width="100px" size="small">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!--查看成员-->
    <el-dialog title="角色成员" width="600px" class="dialog" :visible.sync="dialogViewVisible" :close-on-click-modal='false'>
      <RoleUser :roleId="roleId"></RoleUser>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogViewVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看菜单-->
    <el-dialog title="菜单" width="600px" class="dialog" :visible.sync="dialogMenuVisible" :close-on-click-modal='false'>
      <el-tree
        :data="options"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getCheckedNodes">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RoleUser from '../components/RoleUser'
export default {
  name: 'Role',
  components: {
    RoleUser
  },
  data () {
    return {
      tableData: [],    //  当前页数据
    /************************新增角色********************* */
      addForm: {name: ''},                //  新增表单 (选择框字段需要先定义)
      addFormRules:{
          name: [{ required: true, validator: this.isNull, trigger: 'blur' }],
      },//新增校验规则
      dialogAddVisible: false,    //  新增模态框
    /************************成员列表********************* */
      dialogViewVisible: false,
      roleId: '',     //  当前角色ID
    /************************菜单列表********************* */
      dialogMenuVisible: false,
      menuRoleId: '',     //  当前角色ID
      options: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  mounted(){
    this.getData()
    this.$post("/api/UrlController/getAllUrls", {}, (data) => {
      let options = []
      data.list.map((item) => {
        if(item.id.indexOf("-") == -1){
          options.push({
            id: item.id,
            label: item.name,
            path: item.path || '',
            children: []
          })
        }else{
          let index = item.id.split("-")[0] - 1
          options[index].children.push({
            id: item.id,
            label: item.name,
            path: item.path
          })
        }
      })
      this.options = options
    })
  },

  methods: {
    getData(){
      this.$post("/api/RoleController/getList",{}, (data) => {
        this.tableData = data.list;
      })
    },
    //  删除角色
    delRole(id, index){
      this._confirm('确定删除吗?', () => {
        this.$post('/api/RoleController/delOne', {id: id}, (data) => {
          this.$message.success("删除成功！")
          this.tableData.splice(index, 1)
        })
      })
    },
  /******************新增***************** */
    // 打开新增模态框
    openAdd(){},
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
    },
    // 确定新增
    add(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$post("/api/RoleController/addOne", this.addForm, (data) => {
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.tableData.push(data.role)
          })
        }
      })
    },
  /******************成员***************** */
    getMembers(id){
      this.roleId = id
      this.dialogViewVisible = true
    },
  /******************菜单***************** */
    getMenus(id){
      this.menuRoleId = id
      this.dialogMenuVisible = true
      this.$post("/api/RoleUrlController/getList", {roleId: id}, (data) => {
        let options = []
        data.list.map((item) => {
          options.push({
            id: item.urlId,
            label: item.name,
            path: item.path
          })
        })
        this.$refs.tree.setCheckedNodes(options);
      })
    },
    getCheckedNodes() {
      let nodes = this.$refs.tree.getCheckedNodes()
      let urlIds = []
      nodes.map((item) => {
        urlIds.push(item.id)
      })
      this.$post("/api/RoleUrlController/save", {urlIds: urlIds, roleId: this.menuRoleId}, (data) => {
        this.$message.success("操作成功！")
        this.dialogMenuVisible = false
      })
      
    },
  }
}
</script>

<style lang="less" scoped>
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 400px;
    }
  }
</style>

